<template>
	<view class="pages ">

		<div class='goodsInfo'>
			<image :src="info.imageUrl" class="goods-img"></image>
			<div class='goodsPrice'>
				<div class='header'>
					<div class='priceBox'>
						<view class="price">
							<span style="font-size: 32rpx;margin-right: 6rpx;">¥</span>{{info.price}}</view>
						<view class="marketPrice">市场价</view>
					</div>
					<div class="rightBox">
						<div class="conversionTitle">今日流转价</div>
						<div class="conversionRice">{{info.nowPrice}}</div>
					</div>
				</div>
				<div class='title'>
					{{info.goodsName}}
				</div>
			</div>
		</div>

		<div class='OrderInfo'>
			<div class="infoHeader">
				订单详情
			</div>
			<div class="infoList">
				<div class='listItem'>
					<div class='label'>出场价 </div>
					<div class='value'>{{info.startPrice}}</div>
				</div>
				<div class='listItem'>
					<div class='label'>订单编号 </div>
					<div class='value' @tap="copyText(info.orderNumber)">{{info.orderNumber}}</div>
				</div>
			</div>

		</div>


		<!-- <view class="procss"></view>
		<view class="detail-title">订单详情</view>
		
		<view class="detail-item">
			<view>专场名称</view>
			<view>{{info.goodsName}}</view>
		</view>
		<view class="detail-item">
			<view>起始价</view>
			<view>{{info.startPrice}}</view>
		</view>
		<view class="detail-item">
			<view>增长比例</view>
			<view>{{info.percent}}%</view>
		</view>
		<view class="detail-item">
			<view>提货价</view>
			<view>{{info.endPrice}}</view>
		</view>
		<view class="detail-item">
			<view>市场价</view>
			<view>{{info.price}}</view>
		</view>
	
		<view class="detail-item">
			<view>期数</view>
			<view>{{info.sellProgress}}</view>
		</view>
		 -->
	</view>
</template>

<script>
	import {
		myGoodsDetail
	} from '../../api/api.js'
	export default {
		data() {
			return {
				id: '',
				info: '',
				num: 1,
				html: '',
			}
		},
		onLoad(e) {
			this.id = e.id
			// 获取商品详情
			this.getDetail()
		},

		methods: {

			// 获取商品详情
			getDetail() {
				let data = {
					id: this.id
				}
				myGoodsDetail(data).then(res => {
					this.info = res.data
					this.bugPrice = this.info.nowPrice
					var regex = new RegExp('<img ', 'gi')
					this.html = this.info.detail.replace(regex, '<img style="width: 100%;" ');
				})
			},
			copyText(text) {
				uni.setClipboardData({
					data: text,
					success: function () {
						console.log('success');
						uni.showToast({
							title:'复制成功',
							icon:'none'
						})
					}
				});
			}
		}
	}
</script>

<style lang="less">
	.pages {
		width: 100%;
		height: 100vh;
		background: #F6F6F6;
		overflow: hidden;


		.goodsPrice {
			display: flex;
			flex-direction: column;
			// gap: 20rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			margin-bottom: 20rpx;

			.header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 120rpx;
				padding: 0 20rpx;
				background: url('@/static/purchaseGoods/doubleGradient.png') no-repeat;
				background-size: 100% 100%;

				.priceBox {
					display: flex;
					align-items: center;

					.price {
						font-weight: bold;
						font-size: 48rpx;
						color: #0F1724;
					}

					.marketPrice {
						font-weight: 400;
						font-size: 28rpx;
						color: #0F1724;
						margin-left: 12rpx;
					}

				}
				.rightBox{
					.conversionTitle{
						font-weight: 600;
						font-size: 28rpx;
						color: var(--tm-themeColor-text3);
					}
					.conversionRice{
						padding: 4rpx 34rpx;
						background: linear-gradient( 180deg, #FFBEB5 0%, #FF8573 100%);
						border-radius: 24rpx;
						font-weight: 400;
						font-size: 36rpx;
						color: #0F1724;
						margin-top: 10rpx;
					}
				}



			}

			.title {
				font-weight: 400;
				font-size: 32rpx;
				color: #0F1724;
				padding: 28rpx 20rpx;
			}
		}

		.goods-img {
			width: 750rpx;
			height: 750rpx;
		}

		.OrderInfo {
			width: 100%;
			padding-bottom: 20rpx;
			box-sizing: border-box;
			background: #FFFFFF;

			.infoHeader {
				width: 100%;
				height: 88rpx;
				background: url('@/static/purchaseGoods/detailsTitle.png') no-repeat;
				background-size: 100% 100%;
				font-weight: 400;
				font-size: 32rpx;
				color: #151822;
				display: flex;
				align-items: center;
				padding-left: 28rpx;
			}

			.infoList {
				.listItem {
					display: flex;
					padding: 20rpx 28rpx;
					box-sizing: border-box;
					justify-content: space-between;

					.label {
						font-weight: 400;
						font-size: 28rpx;
						color: #898A8F;
					}

					.value {
						font-weight: 400;
						font-size: 28rpx;
						color: #151822;
					}

				}
			}
		}


		.detail-item {
			margin-left: 30rpx;
			font-size: 30rpx;
			color: #808080;
			margin-top: 30rpx;
			width: 690rpx;
			display: flex;
			justify-content: space-between;
		}

		.changes {
			margin: 12rpx 0 0 120rpx;
			text-align: center;
			width: 200rpx;
			height: 50rpx;
			line-height: 50rpx;
			background: #F2F2F2;
			border-radius: 4rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #808080;
		}

		.procss {
			margin-top: 30rpx;
			width: 750rpx;
			height: 10rpx;
			background: #F5F5F5;
		}

		.detail-title {
			margin: 40rpx 0 0 30rpx;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #1A1A1A;
			line-height: 50rpx;
		}

	}
</style>